<template>
  <div class="home">
    <Header
      class="layout-header-bar"
      :style="{ minHeight: '910px', padding: '0 0 0 20px' }"
    >
      <MenuItem>
        <Breadcrumb>
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <BreadcrumbItem to="/S4SW">导航设置</BreadcrumbItem>
        </Breadcrumb></MenuItem
      >
      <MenuItem>
        <Button
          class="dibu"
          :style="{
            margin: '0 12px 0 0',
            background: '#2b85e4',
            color: 'white',
          }"
          @click="add()"
          >添加文章</Button
        >
        <div v-if="addbut">
          <Input v-model="name" style="width: 300px"
            ><span slot="prepend">管理员名称</span></Input
          >
          <Input v-model="age" style="width: 300px"
            ><span slot="prepend">联系电话</span></Input
          >
          <!-- <Input v-model="address" style="width: 300px"
            ><span slot="prepend">添加日期</span></Input
          > -->
          <Button
            :style="{
              margin: '0 12px 0 0',
              background: '#2b85e4',
              color: 'white',
            }"
            @click="determine()"
            >确定</Button
          >
        </div>
      </MenuItem>
      <Table border :columns="columns12" :data="data6">
        <template slot-scope="{ row }" slot="num">
          <strong>{{ row.num }}</strong>
        </template>

        <template slot-scope="{ index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index)"
            >编辑</Button
          >
          <!-- 显示修改 -->
          <div v-if="data6[index].modal1">
            <Input v-model="name" style="width: 300px"
              ><span slot="prepend">管理员名称</span></Input
            >
             <Input v-model="age" style="width: 300px"
              ><span slot="prepend">联系电话</span></Input
            >
          </div>
          <Button
            v-if="!data6[index].modal1"
            type="error"
            size="small"
            @click="remove(index)"
            >删除</Button
          >
          <Button
            v-if="data6[index].modal1"
            type="error"
            size="small"
            @click="qd(index)"
            >确定</Button
          >
        </template>
      </Table>
      <MenuItem>
        <div class="fenye"><Page :total="40" /></div
      ></MenuItem>
    </Header>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      addbut: false,
      num: "",
      value2: "",
      name: "",
      age: "",
      address: "",
      columns12: [
        {
          title: "编号",
          slot: "num",
        },
        {
          title: "管理员名称",
          key: "name",
        },
        {
          title: "联系电话",
          key: "age",
        },
        {
          title: "添加日期",
          key: "address",
        },
        {
          title: "操作",
          slot: "action",
          width: 300,
          align: "center",
        },
      ],
      data6: [
        {
          num: 1,
          name: "John Brown",
          age: 181231156215,
          address: "2022-4-17",

          modal1: false,
        },
        {
          num: 2,
          name: "Jim Green",
          age: 2475274524,
          address: "2022-4-17",
          modal1: false,
        },
        {
          num: 3,
          name: "Joe Black",
          age: 372374270,
          address: "2022-4-17",
          modal1: false,
        },
        {
          num: 4,
          name: "Jon Snow",
          age: 272742746,
          address: "2022-4-17",
          modal1: false,
        },
      ],
    };
  },
  methods: {
    add() {
      this.addbut = true;
    },
    determine() {
      this.data6.push({
        num: this.data6.length + 1,
        name: this.name,
        age: this.age,
        address: this.address,
        modal1: false,
      });
      this.addbut = false;
    },
    show(index) {
      this.age = this.data6[index].age;
      this.name = this.data6[index].name;
      this.address = this.data6[index].address;
      this.data6[index].modal1 = true;
      console.log(this.data6[index].modal1);
    },
    qd(index) {
      this.data6[index].age = this.age;
      this.data6[index].address = this.address;
      this.data6[index].name = this.name;
      this.data6[index].modal1 = false;
    },
    remove(index) {
      this.data6.splice(index, 1);
    },
  },
  mounted() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    var address = year + "-" + month + "-" + strDate;
    console.log(address);
    this.address = address;
  },
  components: {},
};
</script>
<style scoped>
.home {
  width: 952px;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.dibu {
  position: absolute;
  right: 5px;
  top: -50px;
}
.fenye {
  width: 240px;
  margin: auto;
}
</style>
